<template>
    <view>
        <view class="container-with-bg">
            <image src="../../static/my/my_header.png" class="bg-img"></image>
            <view class="fg-content">
                <image class="profile" v-if="headimg" :src="headimg"></image>
                <view v-else class="nova-row-center">
                    <open-data style="width: 128rpx; height: 128rpx; overflow: hidden; border-radius: 10rpx;" type="userAvatarUrl"></open-data>
                </view>
                <view class="nova-column info">
                    <text class="name" v-if="name">{{ name }}</text>
                    <open-data class="name" v-else type="userNickName"></open-data>
                    <text class="phone">手机号：{{ phone }}</text>
                </view>
                <text class="nova-flex nova-flex-center type" @longpress="changeRole">我是 {{ role == 1 ? '阿姨' : role == 3 ? '公司' : '业主' }}</text>
            </view>
        </view>
        <view style="background-color: #FCFCFC; margin-bottom: 50rpx;" :style="{ padding: role == 1 ? '0' : '34rpx' }">
            <view class="sep" v-if="role == 2 || role == 3">
                <view class="card">
                    <view class="left" @click="goMy1()">
                        <text class="label">{{ role == 2 ? '我的发布' : '我的接单' }}</text>
                        <text class="num">{{ my_num1 }}</text>
                    </view>
                    <view class="mid"></view>
                    <view class="right" @click="goMy2()">
                        <text class="label">{{ role == 2 ? '我的雇佣' : '我的收录' }}</text>
                        <text class="num">{{ my_num2 }}</text>
                    </view>
                </view>
            </view>

            <view class="nova-list prefs" :class="{ perfs0: role == 1 }">
                <nova-pref v-if="role == 3" class="pref" title="我的接单" :arrow="true" @click.native="goMyAcceptJobs">
                    <image class="icon" slot="icon" src="../../static/my/my_accept.png"></image>
                </nova-pref>
                <nova-pref v-if="role == 2" class="pref" title="我的发布" :arrow="true" @click.native="goMyPublish">
                    <image class="icon" slot="icon" src="../../static/my/my_publish.png"></image>
                </nova-pref>
                <nova-pref v-if="role == 2" class="pref" title="我的关注" :arrow="true" @click.native="goMyFocus">
                    <image class="icon" slot="icon" src="../../static/my/my_focus.png"></image>
                </nova-pref>
                <nova-pref v-if="role == 2" class="pref" title="我的订单" :arrow="true" @click.native="goMyOrder">
                    <image class="icon" slot="icon" src="../../static/my/my_order.png"></image>
                </nova-pref>
                <nova-pref class="pref" title="我的简历" :arrow="true" @click.native="goInfo" v-if="role == 1">
                    <image class="icon" slot="icon" src="../../static/my/my_info.png"></image>
                </nova-pref>
                <nova-pref class="pref" title="基本信息" :arrow="true" @click.native="goInfo" v-else>
                    <image class="icon" slot="icon" src="../../static/my/my_info.png"></image>
                </nova-pref>
                <nova-pref class="pref" title="资质证明" :arrow="true" @click.native="goCert" v-if="role == 1 || role == 3">
                    <image class="icon" slot="icon" src="../../static/my/my_zz.png"></image>
                </nova-pref>
                <nova-pref class="pref" title="我的通知" :arrow="true" @click.native="goNotify">
                    <image class="icon" slot="icon" src="../../static/my/my_msg.png"></image>
                </nova-pref>
                <nova-pref v-if="role == 0" class="pref" title="我的申请" :arrow="true" @click.native="goApply">
                    <image class="icon" slot="icon" src="../../static/logo.png"></image>
                </nova-pref>
                <nova-pref class="pref" title="积分钱包" :arrow="true" @click.native="goCredit">
                    <image class="icon" slot="icon" src="../../static/my/my_credit.png"></image>
                </nova-pref>
                <nova-pref class="pref" title="帮助与反馈" :arrow="true" @click.native="goHelp">
                    <image class="icon" slot="icon" src="../../static/my/my_help.png"></image>
                </nova-pref>
                <block v-if="role == 3">
                    <!--                    <nova-pref class="pref" title="我的录用" :arrow="true" @click.native="goMyAcceptJobs">
                        <image class="icon" slot="icon" src="../../static/logo.png"></image>
                    </nova-pref> -->
                    <nova-pref class="pref" title="录入阿姨" :arrow="true" @click.native="goEmploy">
                        <image class="icon" slot="icon" src="../../static/my/my_checkin.png"></image>
                    </nova-pref>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
import novaPref from '../../components/nova/pref.vue';
export default {
    name: 'p-profile',
    props: {},
    components: {
        novaPref
    },
    data() {
        return {
            userthings: {},
            userinfo: {},
            userbasic: undefined,
            name: '',
            phone: '',
            headimg: '',
            showNums: false,
            role: '',
            my_num1: 0,
            my_num2: 0
        };
    },
    created() {
        this.updateUI();
    },
    methods: {
        updateUI() {
            console.log('role', this.$global.role);
            this.showNums = this.$global.role == 2 || this.$global.role == 3;
            this.role = this.$global.role ? parseInt(this.$global.role) : 0;
            this.userthings = uni.getStorageSync('userInfo');
            this.userinfo = uni.getStorageSync('userdetails');
            this.userbasic = uni.getStorageSync('userbasic');
            console.log('userbasic', this.userbasic);
            if (this.userbasic) {
                this.name = this.userbasic.name;
                this.headimg = this.userbasic.headimg;
                this.phone = this.userbasic.contact || this.userbasic.phone;
            }
            if (!this.name) {
                this.name = this.userinfo ? this.userinfo.name : '';
            }
            if (!this.name) {
                this.name = this.userthings ? this.userthings.nickName : '';
            }
            if (!this.headimg) {
                this.headimg = this.userinfo ? this.userinfo.headimg : '';
            }
            if (!this.headimg) {
                this.headimg = this.userthings ? this.userthings.avatarUrl : '';
            }
            
            console.log('this.phone', this.phone, 'this.name', this.name);
            if (this.$global.sessionkey && this.$global.identification >= 10) {
                this.getNum();
            }
        },
        goMy1() {
            if (!this.$checkIdentification()) {
                return;
            }
            //role == 2 ? '我的发布' : '我的接单'
            if (this.role == 2) {
                uni.navigateTo({
                    url: '../yz/yz-publish-list'
                });
            } else if (this.role == 3) {
                uni.navigateTo({
                    url: '../gs/gs-accept-jobs'
                });
            }
        },
        goMy2() {
            if (!this.$checkIdentification()) {
                return;
            }
            //role == 2 ? '我的雇佣' : '我的收录'
            if (this.role == 2) {
                uni.navigateTo({
                    url: '../yz/yz-employ-aunty'
                });
            } else if (this.role == 3) {
                uni.navigateTo({
                    url: '../gs/gs-employ-aunty'
                });
            }
        },
        async getNum() {
            if (this.role == 2 || this.role == 3) {
                let res = await this.$request.post({
                    url: '/aunt/mine/mineNumer',
                    data: {
                        type: this.$global.role
                    }
                });
                if (this.role == 2) {
                    this.my_num1 = res.minePublishNumber;
                    this.my_num2 = res.mineHireNumber;
                } else if (this.role == 3) {
                    this.my_num1 = res.mineReceiptNumber;
                    this.my_num2 = res.mineEmployNumber;
                }
            }
        },
        goMyAcceptJobs() {
            if (!this.$checkIdentification()) {
                return;
            }
            if (this.$global.role == 3) {
                uni.navigateTo({
                    url: '../gs/gs-accept-jobs'
                });
            }
        },
        goMyPublish() {
            if (!this.$checkIdentification()) {
                return;
            }
            if (this.$global.role == 3) {
                uni.navigateTo({
                    url: '../gs/gs-employ-aunty'
                });
            } else if (this.role == 2) {
                uni.navigateTo({
                    url: '../yz/yz-publish-list'
                });
            }
        },
        goInfo() {
            if (!this.$checkIdentification()) {
                return;
            }
            if (this.$global.role == 1) {
                uni.navigateTo({
                    url: '../c/p-resume'
                });
            } else if (this.$global.role == 2) {
                uni.navigateTo({
                    url: '../yz/yz-info'
                });
            } else if (this.$global.role == 3) {
                uni.navigateTo({
                    url: '../gs/gs-info'
                });
            }
        },
        goNotify() {
            if (!this.$checkIdentification()) {
                return;
            }
            uni.navigateTo({
                url: '../c/p-msg'
            });
        },
        goHelp() {
            uni.navigateTo({
                url: '../c/p-help-feedback'
            });
        },
        goApply() {
            if (!this.$checkIdentification()) {
                return;
            }
            uni.navigateTo({
                url: '../ay/ay-sqlist'
            });
        },
        goCredit() {
            if (!this.$checkIdentification()) {
                return;
            }
            uni.navigateTo({
                url: '../credit/credit'
            });
        },
        goCert() {
            if (!this.$checkIdentification(30)) {
                return;
            }
            uni.navigateTo({
                url: '../c/p-credentials'
            });
        },
        goEmploy() {
            if (!this.$checkIdentification(40)) {
                return;
            }
            uni.navigateTo({
                url: '../c/p-resume?type=2'
            });
        },
        goMyFocus() {
            if (!this.$checkIdentification()) {
                return;
            }
            uni.navigateTo({
                url: '../yz/yz-focus-aunty'
            });
        },
        goMyOrder() {
            if (!this.$checkIdentification()) {
                return;
            }
            this.goMy2();
        },
        changeRole() {
            uni.reLaunch({
                url: '../login/chooseuser?force=true'
            });
        }
    }
};
</script>

<style lang="scss">
.container-with-bg {
    position: relative;
    width: 100%;
    height: 240rpx;
    .bg-img {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        height: 240rpx;
        background: $uni-color-primary;
    }
    .fg-content {
        position: absolute;
        z-index: 10;
        left: 0;
        top: 40rpx;
        width: 100%;
        display: flex;
        padding-left: 34rpx;
        .profile {
            width: 128rpx;
            height: 128rpx;
            border-radius: 10rpx;
            background-color: #f2f2f2;
        }
        .info {
            padding: 18rpx 0;
            color: white;
            flex: 1;
            padding-left: 20rpx;
            display: flex;
            justify-content: space-between;
            .name {
                font-size: 40rpx;
            }
            .phone {
                font-size: 30rpx;
            }
        }
        .type {
            font-size: 28rpx;
            background-color: #f0ad4e;
            border-radius: 40rpx 0rpx 0rpx 40rpx;
            height: 80rpx;
            width: 213rpx;
            color: white;
        }
    }
}
.sep {
    height: 125rpx;
}
.card {
    position: relative;
    background-color: white;
    box-shadow: 0 0 2rpx #f1f1f1;
    top: -60rpx;
    left: 0;
    border-radius: 8rpx;
    color: $uni-color-primary;
    margin-left: 0rpx;
    margin-right: 0rpx;
    display: flex;
    height: 176rpx;
    align-items: center;
    .left,
    .right {
        flex: 1;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        .label {
            font-size: 28rpx;
            padding: 30rpx 0;
        }
        .num {
            font-size: 40rpx;
            font-weight: 800;
            padding-bottom: 30rpx;
        }
    }
    .mid {
        width: 1rpx;
        height: 60rpx;
        background-color: #666666;
    }
}
.prefs {
    background-color: white;
    border-radius: 12rpx;
    border: 1px solid #f1f1f1;
    box-shadow: 0 0 2rpx #f1f1f1;
    .pref {
        position: relative;
        height: 96rpx;
        box-sizing: border-box;
        .icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
        }
        &:after {
            @include divider(34rpx, 34rpx);
        }
    }
}
.prefs0 {
    border-radius: 0;
}
</style>
